<template>
	<view>
		<view class="gridContainer">
			<view class="nav-list">
				<navigator
					hover-class="none"
					:style="{ 'animation-delay': '1.' + index + 1 + 's' }"
					:url="'' + item.url"
					class="nav-li animation-slide-bottom"
					navigateTo
					:class="'bg-' + item.color"
					v-for="(item, index) in boxItems"
					:key="index"
				>
				<view class="iconChange">
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</view>
				
					<view class="nav-title">{{ item.title }}</view>
					<!-- <view class="nav-name">{{ item.name }}</view> -->
					
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			boxItems: [
				{
					title: 'A级门店',
					url: '/agentPages/agent/shopShowDetail?type=A',
					// color: 'cyan',
					color:'#efefef',
					cuIcon: 'shop'
				},
				{
					title: 'B级门店',
					url: '/agentPages/agent/shopShowDetail?type=B',
					// color: 'blue',
					color:'#efefef',
					cuIcon: 'shop'
				},
				{
					title: 'C级门店',
					url: '/agentPages/agent/shopShowDetail?type=C',
					// color: 'purple',
					color:'#efefef',
					cuIcon: 'shop'
				},
				{
					title: 'D级门店',
					url: '/agentPages/agent/shopShowDetail?type=D',
					// color: 'mauve',
					color:'#efefef',
					cuIcon: 'shop'
				}
			]
		};
	}
};
</script>

<style></style>
